<template>
  <div class="echarts_box">
    <div class="wave" ref="wave" :style="{background:waterColor}"></div>
    <div class="wave-mask" ref="waveMask" :style="{background:backgroundColor}"></div>
    <div class="tips" ref="tips" :style="{color:textColor}">{{number}}%</div>
  </div>
</template>


<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  mounted() {
    this.$nextTick(() => {
      this.change();
    });
  },
  computed: {
    // ...mapGetters(["echartsColor"]),
  },
  watch: {
    width: "change", // 数值变化是更新图表
    number: "change", // 数值变化是更新图表
    backgroundColor: "change", // 数值变化是更新图表
    waterColor: "change", // 数值变化是更新图表
    textColor: "change", // 数值变化是更新图表
    textSize: "change", // 数值变化是更新图表
    data: "change", // 数值变化是更新图表
  },
  props: {
    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [];
      },
    },
    number: {
      type: Number | String,
      default: 22,
    },
    backgroundColor: {
      type: String,
      default: "#093b76",
    },
    waterColor: {
      type: String,
      default: "rgba(255,92,238,1)",
    },
    textColor: {
      type: String,
      default: "rgba(255,92,238,1)",
    },
    width: {
      type: String | Number,
      default: 100,
    },
    textSize: {
      type: String | Number,
      default: 28,
    },
    isRoseType: {
      //是否为玫瑰图
      type: Boolean | String,
      default: false,
    },
  },
  methods: {
    change() {
      // let mask = document.getElementsByClassName("wave-mask")[0];
      let value = this.number;
      let mask = this.$refs.waveMask;
      let wave = this.$refs.wave;
      let tips = this.$refs.tips;
      mask.style.top = 100 - value + "%";
      mask.style.width = this.width + "px";
      mask.style.height = this.width + "px";
      wave.style.width = this.width / 2 + "px";
      wave.style.height = this.width / 2 + "px";
      tips.style.fontSize = this.textSize + "px";
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts_box {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  // border: 3px solid #67c23a;
  // background: #ffffff;
  position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
  // padding: 7px 7px;
  overflow: hidden;
}
.wave {
  position: relative;
  width: 100px;
  height: 100px;
  // background-image: linear-gradient(-180deg, red 13%, #67c23a 91%);

  border-radius: 50%;
  box-shadow: 1px 3px 3px 0 rgba(139, 139, 139, 0.822);
}
.wave-mask {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 100%;
  left: 50%;
  border-radius: 39%;
  background-color: white;
  transform: translate(-50%, -100%) rotate(0);
  animation: toRotate 10s linear infinite;
  z-index: 20;
}

@keyframes toRotate {
  50% {
    transform: translate(-50%, -100%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -100%) rotate(360deg);
  }
}
.tips {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-25px, -25px);
  text-align: center;
  line-height: 50px;
  z-index: 30;
  font-size: 28px;
  font-family: SimHei, SimHei-Regular;
  font-weight: 400;
}
@media screen and (max-width: 1200px) {
  .tips {
    font-size: 26px;
  }
}
</style>